<script setup>
import { reactive, ref } from '@vue/reactivity'
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore() //vuex
store.commit('getInfect') //提交获得common和api的方法
const isAndroid = store.state.isAndroid //安卓
const isiOS = store.state.isiOS //ios
const common = store.state.common.obj //common.js
const api = store.state.api
const isAnchor = common.userId >= 300000 && common.userId < 500000 ? true : false
// 面板数据
let panelData = reactive({
    result: {
        "awardCount": 0,
        "awardLimit": 39999,
        "goodsCount": 0,
        "userId": 0,
        "userName": ""
    }
})
const getPanelData = async () => {
    let url = api.welfareUser_panel({ anchorId: isAnchor ? common.userId : common.anchorId })
    await url.then(res => {
        // var res = {
        //     data:{
        //         "errcode": 0,
        //         "result": {
        //             "awardCount": 0,
        //             "awardLimit": 19999,
        //             "goodsCount": 5000,
        //             "userId": 2039605600,
        //             "userName": "残阳醉"
        //         },
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        let data = res.data.result
        if (data) {
            panelData.result = data
        }
    })
}
const panel = computed(() => {
    return panelData.result
})
let time
onMounted(() => {
    getPanelData()
    time = setInterval(async () => {
        getPanelData()
    }, 8 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(time)
})
// 判断版本号添加类名的方法
function toNum (d) {
    let a = d.toString();
    let c = d.split(".");
    let num_place = ["", "0", "00", "000", "0000"],
        r = num_place.reverse();
    for (let i = 0; i < c.length; i++) {
        let len = c[i].length;
        c[i] = r[len] + c[i];
    }
    let res = c.join("");
    return res;
}
const compareVersion = (a, b) => {
    let alen = a.split(".").length;
    let blen = b.split(".").length;
    if (alen < blen) {
        for (let i = 0; i < blen - alen; i++) {
            a += ".0";
        }
    } else if (blen < alen) {
        for (let i = 0; i < alen - blen; i++) {
            b += ".0";
        }
    }
    let _a = toNum(a),
        _b = toNum(b);
    return _a - _b;
};
const setRem = () => {
    function setRem () {
        var designWidth = 150,
            rem2px = 100;
        document.documentElement.style.fontSize =
            (document.documentElement.clientWidth / designWidth) * rem2px + "px";
    }
    window.onresize = setRem;
    setRem();
}
// 判断版本号添加类名
let sizeClass = ''
if (isAndroid) {
    setRem()
    if (compareVersion(common.version, "4.1.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else if (isiOS) {
    setRem()
    if (compareVersion(common.version, "4.7.5.0") < 0) {
        sizeClass = "mss";
    } else {
        sizeClass = "mnew";
    }
} else {
    if (compareVersion(common.version, "2.77.0.0") < 0) {
        sizeClass = "pc";
    } else {
        sizeClass = "pcnew";
    }
}
//跳转活动页
const jumpPage = () => {
    const showurl =
        "https://page.qxiu.com/activity/2024/march/index-m.html" +
        window.location.search;
    if (isiOS) {
        window.location.href =
            "#guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else if (isAndroid) {
        window.location.href =
            "guagua://qiqi::9::2:" + encodeURIComponent(showurl);
    } else {
        window.open(
            "http://page.qxiu.com/activity/2024/march/index.html" +
            window.location.search +
            "&width=1029&height=668&title=春季联赛2024&openWay=0&fromeHall=0"
        );
    }
}
</script>

<template>
    <div class="wrap" @click="jumpPage" v-cloak :class="sizeClass">
        <ul class="panel_welfare">
            <li>
                <p>已送出联赛票</p>
                <p>{{ panel.goodsCount }}/{{ panel.awardLimit }}</p>
            </li>
            <li>
                <p>已获奖励个数</p>
                <p> {{ panel.awardCount }}</p>
            </li>
        </ul>
    </div>
</template>

<style lang='scss' scoped></style>